<template>
  <page-frame>
    <div class="batchBinding" style="vertical-align: top">
      <div class="toptitle">
        <div class="left"><span>设备列表</span> - <span>批量</span></div>
        <div style="float:left;margin-left:20%;">
          <form method="post" :action="apiUrl + '/deviceMonitor/m/deviceMonitor/downloadBedTemplate?access_token=' + token" accept-charset="UTF-8">
            <!--<input v-for="(val,key) in queryData" :name="key" :value="val" type="hidden"/>-->
            <input type="submit" value="下载批量绑定床位模版">
          </form>
          <form method="post" :action="apiUrl + '/deviceMonitor/m/deviceMonitor/downloadMemberTemplate?access_token=' + token" accept-charset="UTF-8">
            <!--<input v-for="(val,key) in queryData" :name="key" :value="val" type="hidden"/>-->
            <input type="submit" value="下载批量绑定会员模版">
          </form>
        </div>
        <div class="right">
          <div class="btns">
            <el-button
              style="text-align: center;width:90px;"
              @click="back">返 回
            </el-button>
          </div>
        </div>
      </div>
      <div class="borderT"></div>
      <el-row>
        <el-col :span="1" :offset="1">
          <label >上传文件</label>
        </el-col>
        <el-col :span="5">
          <el-upload
            class="upload-demo"
            :action="apiUrl+'/deviceMonitor/m/deviceMonitor/uploadTemplate?access_token='+token"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :before-upload="beforeUpload"
            :on-success="handleAvatarSuccess"
            :file-list="fileList"
            name="file">
            <el-button size="small" type="primary">点击上传</el-button>
          </el-upload>
        </el-col>
      </el-row>

      <el-row style="margin-top:30px;">
        <el-col :span="1" :offset="1">
          <label>模版内容</label>
        </el-col>
        <el-col :span="22">
          <img src="../../img/batchBindTable.jpg" style="width:100%;" alt="">
        </el-col>
      </el-row>

      <el-row style="margin-top:30px;">
        <el-col :offset="2">
          <p class="remind">1. 请先下载模板，填写完毕后上传该文件</p>
          <p class="remind">2. 请确认填写时格式是否正确，请不要新增、复制其他格式</p>
        </el-col>
      </el-row>
    </div>
  </page-frame>
</template>


<script>
  import {apiUrl} from "../../config/env"
  export default {
    data() {
      return {
        apiUrl,
        token: window.sessionStorage.getItem("access_token"),
        fileList: [],
        ConType:{
          contentType: 'application/json'
        },
      }
    },
    methods: {
      init(){

      },

      /**
       * upload file
       */
      handleRemove(file, fileList) {
//        console.log(file, fileList);
      },
      handlePreview(file) {
//        console.log(file);
      },
      beforeUpload(file){
//        console.log(file);
      },
      handleAvatarSuccess(response,file){
        debugger
       if(response.status==200){
         this.$message({
           message:'上传成功',
           type:'success'
         });
       }else{
         this.$message({
           message:response.data.data.msg,
           type:'error'
         });
       }
      },
      /**
       * back upper level
       */
      back(){
        this.$router.push({name: 'intelligentHW'});
      },
    },
    mounted: function () {
      this.init();
    },
  }
</script>
<style>
.batchBinding .remind{
  margin:0;
}
.batchBinding form{
  display:inline-block;
}
.batchBinding form input{
  background-color:#fff;
  border: 1px solid #0cb7c6;
  color:#0cb7c6;
  font-size:14px;
  padding: 10px 15px;
  border-radius: 4px;
}
</style>
